<template>
    <div class="common" v-loading="loading">
        <div class="breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/admin/user' }">用户管理</el-breadcrumb-item>
                <el-breadcrumb-item>{{menu}}</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="backbutton" v-show="bbshow">
                <el-button plain @click="cancelButton()">返回</el-button>
            </div>
        </div>
        <div class="meta-divder"></div>

        <el-row v-show="showBox === 'search'">
            <el-row class="wdh-search">
                <el-col :span="4">
                    <el-button  type="primary" @click="addRole()">
                        <i class="fa fa-plus" aria-hidden="true"></i>
                        <span style="margin-left:3px">新增角色</span>   
                    </el-button>
                </el-col>
                <el-col :span="20">
                    <el-row type="flex" :gutter="5" justify="end">                   
                        <el-col :span="4">
                            <el-input v-model="searchParams.role_name"  placeholder="输入角色名称" clearable></el-input>
                        </el-col>                
                        <el-button-group class="wdh-search-button">
                            <el-button type="primary" icon="el-icon-search" @click="goSearch(1)"></el-button>
                            <el-button icon="el-icon-refresh" @click="goSearch(2)"></el-button>
                        </el-button-group>
                    </el-row>
                </el-col>
            </el-row>
            <!--员工列表-->

            <el-row class="wdh-table">
                <el-table :data="roleList" style="width: 100%;">
                    <el-table-column prop="id" label="角色ID" width="120" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="role_name" label="角色名称" width="200" header-align="center" align="center"></el-table-column>              
                    <el-table-column prop="created_at" label="注册时间"  width="180" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="content" label="角色简介" header-align="center" align="center"></el-table-column>
                 
                    <el-table-column fixed="right" label="操作" width="160" header-align="center" align="center">
                            <template slot-scope="scope">
                                <el-row class="operation-btn">
                                    <el-button type="text" size="small" title="编辑" @click="eiditRole(scope.row)">
                                        <i class="fa fa-pencil" aria-hidden="true" style="color:#409eff"></i>
                                    </el-button>
                                    <el-button type="text" size="small" title="删除" @click="del(scope.row.id)">
                                        <i class="fa fa-trash" aria-hidden="true" style="color:#ff4d4f"></i>
                                    </el-button>
                                    <el-button type="text" size="small" title="角色授权" @click="setPower(scope.row)">
                                        <i class="fa fa-gavel" aria-hidden="true" style="color:#52c41a"></i>
                                    </el-button>                             
                                </el-row>
                            </template>

                    </el-table-column>
                </el-table>
                <div class="page">
                    <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.current_page"
                    :page-sizes="pagination.page_sizes"
                    :page-size="pagination.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total">
                    </el-pagination>
                </div>                                
            </el-row>
            
        </el-row>
        
        <!--新增/编辑-->
        <el-dialog :visible.sync="dialogFormVisible">
            <div slot="title" class="header-title">
                <span class="title-name"> {{ dialogTitle }}</span>
            </div>
            <el-form :model="form">
                <el-form-item label="角色名称" :label-width="formLabelWidth">
                    <el-input v-model="form.role_name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色简介" :label-width="formLabelWidth">
                    <el-col>
                        <el-input type="textarea" :rows="5" placeholder="请填写一句话简介" v-model="form.content" maxlength="50" show-word-limit>
                        </el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelAdd">取 消</el-button>
                <el-button type="primary" @click="submitButton">确 定</el-button>
            </div>
        </el-dialog>


        <!--授权界面-->
        <el-row class="wdh-edit" v-show="showBox === 'edit'">
            <el-form ref="editForm" :model="editForm" label-width="110px" class="wdh-edit-content">

                <el-form-item label="角色编号:">
                    <el-col :span="6">{{editForm.id}}</el-col>
                </el-form-item>
                <el-form-item label="角色名称:">
                    <el-col :span="6">{{editForm.role_name}}</el-col>
                </el-form-item>

                <el-form-item label="授权选项:">
                    
                </el-form-item>

            </el-form>
            <div class="common-button">
                <el-button plain @click="cancelButton">取消</el-button>
                <el-button type="primary" @click="savePower">保存</el-button>
            </div>
        </el-row>
        
    </div>
</template>
<script>
    export default {
        data() {
            return {
                loading:true,
                bbshow:false,
                menu:'角色列表',
                showBox: 'search',
                searchParams: {
                    role_name: ''
                },
                roleList:[],
                pagination: {
                    current_page: 1,
                    page_sizes: [10, 20, 30, 40],
                    limit: 10,
                    total: 0
                },

                dialogTitle:'新增角色',
                dialogFormVisible: false,
                form: {
                    id:0,
                    role_name: '',
                    content: ''
                },
                formLabelWidth: '80px',


                //编辑、新增
                editForm: {
                    id: 0,
                    role_name: '',
                    content: '',
                },

            
            }
        },
        mounted(){
            this.getRoleList();

        },
        methods: {

            //获取用户数据列表
            getRoleList(pagination){
                if (pagination) {
                    this.pagination.current_page = pagination.current_page;
                    this.pagination.limit = pagination.limit;
                }
                let dt = {
                    params: {
                        page: this.pagination.current_page,
                        limit: this.pagination.limit,
                        role_name: this.searchParams.role_name
                    }
                };

                window.axios.get('/api/role/list',dt).then((res) => {
                    this.loading = false;
                    if (res.data.code == 200) {
                        this.roleList = res.data.data.data;
                        this.pagination.total = res.data.data.total;
                        this.pagination.current_page = res.data.data.current_page;
                    } else {
                        this.$message(res.data.msg);
                    }
                });
            },

            //搜索
            goSearch(val){
                if(val == 2){
                    this.searchParams.role_name = '';
                }
                
                this.pagination.paging = 1;
                this.getRoleList();
                
            },

            //保存操作
            submitButton(){      
                this.loading = true; 
                //添加
                let url = '/api/role/save';                              
                window.axios.post(url, this.form).then((res) => {
                    this.loading = false;
                    //console.log(res);
                    if (res.data.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '保存成功'
                        });
                        
                        //this.dialogFormVisible = false;
                        this.cancelAdd();
                        this.getRoleList();
                        
                    } else {
                        this.$message.error(res.data.message);
                    }
                }).catch((error) => {
                    this.loading = false;
                    this.$message.error('保存失败，错误信息：' + error);
                });
                 
            },
            cancelAdd(){
                this.dialogFormVisible = false;
                this.form = {
                    role_name:'',
                    content:''
                };
            },
            //选择每页显示多少条
            handleSizeChange(val){
                this.pagination.limit = val;
                this.getRoleList(this.pagination);
                
            },
            handleCurrentChange(val) {
                this.pagination.current_page = val;
                 this.getRoleList(this.pagination);
            },

            //新增窗口开启
            addRole(){
                this.dialogTitle = '新增角色';
                this.dialogFormVisible = true; 
            },

            //编辑
            eiditRole(row){
                this.dialogTitle = '编辑角色';
                this.dialogFormVisible = true; 
                this.form = {
                        id:row.id,
                        role_name:row.role_name,
                        content:row.content
                    };
            },

            //删除
            del(id){
                let data = {'id':id};
                this.$confirm('确定删除此角色！', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    window.axios.put('/api/role/del',data).then((res) => {
                        if(res.data.code ==200){
                            this.$message({
                            type: 'success',
                            message: '删除成功!'
                            });

                            this.getRoleList();
                            
                        }else{
                           this.$message(res.data.msg); 
                        }
                    });
                    
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },

            //角色授权界面
            setPower(row){
                this.showBox = 'edit';
                this.menu='角色授权';
                this.bbshow = true;
                this.editForm = {
                    id: row.id,
                    role_name: row.role_name,
                };

            },
            //取消操作
            cancelButton(){
                this.editForm = {
                    id: 0,
                    role_name: '',
                };
                this.showBox = 'search';
                this.menu='角色列表';
                this.bbshow = false;
            },

            //保存授权
            savePower(){

            }


        },
    }
</script>
<style>

    .common{     
        border-radius: 10px;
        background: #fff;
        margin: 10px;
        box-shadow: 1px 3px 7px 0 rgb(12 64 168 / 20%);
    }

    .breadcrumb{
        padding:20px;
        color:#666;
    }
    .backbutton{
        position: relative;
        float: right;
        top: -25px;
        right: 50px;
    }
    
    .is-link{
        color:#666!important;
    }
    .el-breadcrumb__item:hover  .is-link{
        color:#409EFF!important;
    }
    .meta-divder{
        font-weight: 400;
        font-size: 1rem;
        border-top: 1px solid #d3e0e9;
        border-bottom: 1px solid rgba(211,224,233,.15);
        margin: 1rem 0;
        line-height: 1;
        margin:0 20px;
    }
    .common-button{
        margin-bottom: 25px;
        background-color: #f2f7fa;
        width: 100%;
        text-align: center;
        height: 50px;
    }
    .page{
        float:right;
        margin-top: 10px;
    }
    .el-dialog {
        width:35%;
    }
    .el-col-24{
        padding-left:0!important;
        padding-right:0!important;
    }
    .el-form-item__content{
        padding-right:25px!important;
    }
   
    
</style>